<template>
  <div class="detailpage">
    <!-- 搜索栏 -->
    <div class="nav-s">
      <div class='nav'>
        <span type="default" class='nav-left' @click="onClick"><img src="./../../../assets/HomeImg/6.png"
            alt="" /></span>
        <van-search v-model="value" ref="" placeholder="帅哥本人" left action="" class='nav-cen' @click="navShousuo" />
        <van-button type="default" class='nav-right' to="/cart"><img src="./../../../assets/HomeImg/5.png" alt="">
        </van-button>
        <span></span>
      </div>
    </div>
    <!-- 标签栏 -->
    <div class="tab-s">
      <van-tabs v-model="active" id="van-tabs">
        <van-tab title="综合">
          <Detail :typeList="typeList"></Detail>
        </van-tab>
        <van-tab title="销量">
          <Detail :typeList="typeList"></Detail>
        </van-tab>
        <van-tab title="新品">
          <Detail :typeList="typeList"></Detail>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
  import Detail from '@/components/Detail'
  export default {
    data: () => ({
      value: '',
      active: 0,
      id: '',
      typeList: [],
      // chang: 1,
      bankuai: ''
    }),
    created() {
      this.id = this.$route.params.id
      this.value = this.$route.params.id
      this.getProductBuyType(this.id)
      // this.Content(this.id)
    },
    methods: {
      onClick() {
        this.$router.push('/home')
      },
      navShousuo() {
        this.$router.push('/home/navcloist')
      },
      async getProductBuyType(id) {
        try {
          const data = await this.$Api.apiHome.getProductBuyType(id)
          console.log('getProductBuyType',data);
          if (data.msg === '服务器异常!') return this.$Toast('找不到该类商品')
          this.typeList = data
          // console.log(this.typeList.typeList)
          console.log(data.msg)
        } catch (error) {
          this.$Toast(error)
        }
      }
      // async Content(id) {
      //   try {
      //     const res = await this.$Api.apiHome.Content(id)
      //     // this.bankuai = res.data.data
      //     console.log(res)
      //     if (res.data.status !== -200) {
      //       this.typeList = res.data.data
      //       // this.chang = 1
      //     } else {
      //       // this.chang = 0
      //     }
      //     // console.log(res)
      //     // console.log(res.data.data)
      //   } catch (error) {
      //     this.$Toast(error)
      //   }
      // }
    },
    components: {
      Detail
    }
  }

</script>
<style lang="less" scoped>
  // 去除下边滚动条
  html,
  body {
    height: 100%;
  }

  ::-webkit-scrollbar {
    width: 0;
  }

  body,
  #app {
    width: 100%;
    overflow-x: hidden;
  }

  // 搜索栏
  .nav-s {
    width: 100%;
    height: 54px;
    background: #fff;
    border-bottom: 1px solid #e5e5e5;

    .nav {
      width: 100%;
      position: fixed;
      height: 54px;
      z-index: 100;
      background: #fff;
      border-bottom: 1px solid #e5e5e5;

      .nav-left,
      .nav-right {
        float: left;
        width: 15%;
        text-align: center;
        padding-top: 17px;
        border: none;

        img {
          width: 80%;
        }
      }

      .nav-left {
        img {
          width: 40%;
        }
      }

      .nav-cen {
        float: left;
        width: 70%;
        padding: 10px 0;
      }

      .van-search__content {
        background: #eee;
        color: #999;
      }
    }
  }

  // 标签栏

</style>
